@import "../../../styles/base";

@function tovw($size) {
  @return #{$size / 3.6}vw;
}

.DailyTask {
  background: #fff;
  padding: tovw(8) 0 tovw(15) 0;
  margin-bottom: tovw(10);

  .title {
    padding-left: tovw(20);
    font-size: tovw(16);
    color: #000000;
    letter-spacing: 0;
    font-weight: 700;
    position: relative;
  }

  ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 tovw(6.5);

    li {
      padding: tovw(10);
      width: 100%;

      .wrap {
        display: flex;
        width: 100%;
      }

      &:not(:last-of-type) {
        border-bottom: 1px solid #D5D9DE;
      }

      .task-icon {
        flex: 0 0 tovw(44);
        display: block;
        height: tovw(44);
        border-radius: 50%;
        background: #E8E3F9;
        margin-right: tovw(10);

        &.task-comment {
          background: url("./../images/task-comment.png") center center / tovw(20) no-repeat, #E8E3F9;
        }

        &.task-follow {
          background: url("./../images/task-follow.png") center center / tovw(20) no-repeat, #E8E3F9;
        }

        &.task-download {
          background: url("./../images/task-download.png") center center / tovw(20) no-repeat, #E8E3F9;
        }

        &.task-charge {
          background: url("./../images/task-charge.png") center center / tovw(20) no-repeat, #E8E3F9;
        }
        &.task-gift {
          background: url("./../images/task-gift.png") center center / tovw(20) no-repeat, #E8E3F9;
        }
        &.task-share {
          background: url("./../images/task-share.png") center center / tovw(20) no-repeat, #E8E3F9;
        }
        &.task-live {
          background: url("./../images/task-live.png") center center / tovw(20) no-repeat, #E8E3F9;
        }
      }

      .content {
        flex: 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .label {
          font-size: tovw(14);
          color: #000000;
          letter-spacing: 0;
          font-weight: 400;
        }
      }


      .gifts {
        margin-top: tovw(6);
        .gift-icon {
          display: inline-flex;
          font-size: tovw(14);
          color: #999B9E;
          height: tovw(20);
          font-weight: 400;
          padding-left: 7.5vw;
          padding-right: 1vw;
          background: center left / contain no-repeat;


          &.gift-icon-exp {
            background-image: url("./../images/gift-icon-exp.png")
          }

          &.gift-icon-gift {
            background-image: url("./../images/gift-icon-gift.png")
          }

          &.gift-icon-diamond {
            background-image: url("./../images/gift-icon-diamond.png")
          }

          &.gift-icon-car {
            padding-left: 12vw;
            background-image: url("./../images/gift-icon-car.png")
          }
        }
      }

      .progress {
        .gift-icon {
          font-size: tovw(10);
          background-position: top right;
          background-size: tovw(20) tovw(24);
          padding-top: 7vw;
          padding-left: 0;
          padding-right: 0;
          width: 20%;
          display: inline-flex;
          justify-content: flex-end;
          position: relative;

          .text {
            display: inline-flex;
            justify-content: flex-end;
            margin-top: tovw(25);
          }

          .progress-bar {
            display: inline-flex;
            justify-content: center;
            width: 100%;
            height: tovw(5);
            background: #E8E3F9;
            position: absolute;
            left: -0.5vw;
            right: 0;
            top: 10vw;

            &.progress-bar-done {
              background: #9456FD;

              &::before {
                content: "√";
                background: #9456FD;
              }
            }

            &.progress-bar-doing {
              background: #9456FD;
            }

            &::before {
              content: "";
              color: #fff;
              font-weight: 500;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              width: tovw(20);
              height: tovw(20);
              border-radius: 50%;
              background: #E8E3F9;
              top: -2vw;
              right: -0.5vw;
              z-index: 1;
            }
          }

          &:nth-of-type(1) {
            background-position: top left;
            width: 10%;

            .progress-bar {
              background: transparent;

              &::before {
                content: "";
                width: tovw(16);
                height: tovw(16);
                top: -1.5vw;
              }
            }
          }
          &:nth-of-type(2) {
            width: 15%;
          }
          &:nth-of-type(3) {
            width: 20%;
          }
          &:nth-of-type(4) {
            width: 25%;
          }
          &:nth-of-type(5) {
            width: 30%;
          }
        }
      }

      .action-btn {
        font-size: tovw(12);
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        width: tovw(70);
        height: tovw(24);
        margin: tovw(10) auto;
        background: #9456FD;
        border-radius: tovw(13);
        justify-self: flex-end;

        &[disabled] {
          background: #D5D9DE;
        }
      }
    }
  }
}
